<script setup lang="ts">
  import { computed, ref, unref } from 'vue';
  import { Field, Popup, Icon } from 'vant';
  import { studentList } from '@/data/entity-list';

  const list = studentList();

  const showPopup = ref(false);

  const props = withDefaults(
    defineProps<{
      modelValue?: string;
    }>(),
    {}
  );

  const tempValue = ref<string>(props.modelValue!);
  const selectIndex = ref(-1);

  const emits = defineEmits<{
    (e: 'update:modelValue', value: number): void;
    (e: 'change', id: string): void;
  }>();

  const calcText = computed(() => {
    return list[unref(selectIndex)]?.name;
  });

  const affirm = () => {
    emits('update:modelValue', list[unref(selectIndex)].id);
    emits('change', list[unref(selectIndex)]);
    showPopup.value = false;
  };
</script>

<template>
  <Field
    @click="showPopup = true"
    readonly
    is-link
    label="枚举选择"
    v-bind="$attrs"
    :modelValue="calcText"
  />
  <Popup
    position="bottom"
    :style="{ height: '100%', background: '#f2f2f2' }"
    v-model:show="showPopup"
  >
    <div class="popup-title flex-between">
      <span @click="showPopup = false">取消</span>
      <span>实体选择</span>
      <div @click="affirm">确认</div>
    </div>
    <div
      class="list-item"
      v-for="(item, index) in list"
      :class="selectIndex === index ? 'act' : ''"
      :key="item.id"
      @click="selectIndex = index"
    >
      {{ item }}
      <Icon name="success" />
    </div>
  </Popup>
</template>

<style scoped lang="less"></style>
